import Vue from 'vue'
import Vuex from 'vuex'
import { getItem, setItem } from '@/utils/storage.js'
const TOKEN = 'TOUTIAO_USER'
// 注册Vuex组件
Vue.use(Vuex)
/*
## 本地存储：
1. 获取麻烦（不同组件访问数据时）
2. 数据不是响应式（比如刷新页面等业务时，需要重新获取token）

## 登录成功，将 Token 存储到 Vuex 容器中
1. 获取方便（不通组件可以共享访问vuex中的数据）
2. 响应式（一旦vuex中数据改变，会通知组件更新）
另外：为了持久化，还需要把 Token 放到本地存储
*/

// 导出一个仓库对象
export default new Vuex.Store({
  // 储存数据
  state: {
    // 用户的登录状态信息 初始化时从本地读取
    // 用户的登录状态信息token
    // 获取本地数据
    user: getItem(TOKEN) || {}
  },
  // 筛选state数据
  getters: {
  },
  // 操作state数据
  mutations: {
    setUser (state, user) {
      // 将 用户token数据保存到state中 方便不同组件访问
      state.user = user
      // 将用户token保存到本地数据
      setItem(TOKEN, user)
    },
    updateToken (state, newToken) {
      // 更新 state中的token
      state.user.token = newToken
      // 保存到本地数据
      setItem(TOKEN, state.user)
    }

  },
  // 异步操作数据
  actions: {
  },
  // 模块化仓库
  modules: {
  }
})
